<template>
  <div id="search" class="demo-infinite-container">
    <mu-paper class="demo-paper" :zDepth="1">
      <mu-appbar title="Title" class="search-bar">
        <mu-icon-button class='bar-icon' icon="arrow_back" slot="left" @click="gotoTab()"/>
        <input v-model.trim="q" :value="text" @keyup.enter="search" autofocus=true :underlineShow="false" class="bar-text" hintText="请输入关键字" />
        <mu-icon-button class='bar-icon' icon="close" slot="right" />
      </mu-appbar>
    </mu-paper>

    <div class="result">
      <mu-row class="paper-row">
        <mu-col class="paper-elem" v-for="(subject, index) in subjects" :key="subject.id +'-'+ index">
          <router-link :to="{name: 'MovieSubject', params: {id: subject.id}}">
            <mu-paper class="elem" :zDepth="1">
              <div class="image" :style="'background-image: url('+subject.images.large+')'"></div>
              <div class="text">
                <div class="name">
                  <span class="title">{{subject.title}}</span>
                  <span class="year">{{subject.year}}</span>
                </div>
                <div class="star">
                  <Star class="star-box" :rating="subject.rating.average" v-if="subject.rating.average > 0"></Star>
                  <div class="star-num">{{subject.rating.average | fixNum}}</div>
                </div>
                <div class="genres">类型：{{subject.genres | arr2string}}</div>
                <div class="director">导演：{{subject.directors.map(e=>e.name) | arr2string}}</div>
                <div class="cast">主演：{{subject.casts.map(e=>e.name) | arr2string}}</div>
              </div>
            </mu-paper>
          </router-link>
        </mu-col>
      </mu-row>
      <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="getQuery"/>
    </div>
    <ToTop page="Search"></ToTop>
  </div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
import Star from '@/components/Star'
import ToTop from '@/components/toTop'
import * as type from '@/store/movies/type.js'

  export default{
    name: 'movieSearch',
    components:{
      Star,
      ToTop
    },
    data(){
      return {
        // count: 20,
        // start: 0,
        // total: 0,
        q: '',
        scroller: null
      }
    },
    computed: mapState({ // 返回计算属性
      subjects: state => state.MovieModule.movies.movieQuery.subjects,
      text:     state => state.MovieModule.movies.movieQuery.q,
      page(state){
        return state.MovieModule.movies.movieQuery.curPage
      },
      offset: state  => state.MovieModule.movies.offset,
      loading: state => state.MovieModule.movies.isLoading,
      isEnd (state){
          return state.MovieModule.movies.movieQuery.isEnd
      }
    }),
    created(){
      this.q = this.$route.query.q
      this.scroller = this.$el
    },
    mounted(){
      console.log(`------search mounted---->${Math.random()}`)
      this.getQuery()
    },
    watch : {
      //
      $route: 'getQuery',
    },
    methods: {
      gotoTab(){

        this.$router.go(-this.$store.state.MovieModule.movies.searchStep);
        // 提交修改变量 请求，到 mutations
        this.$store.dispatch(type.UPDATE_MOVIES_SEARCH_STEP, 1);
        this.$store.dispatch(type.CLEAR_MOVIES_QUERY);
        this.loading = false
        this.q = ''
      },
      search(){
        console.log('q---->>>>>', this.q);
        if((`${this.q}`).length === 0){
          return ;
        }
        this.loading = true
        this.$store.dispatch(type.UPDATE_MOVIES_SEARCH_STEP, this.$store.state.MovieModule.movies.searchStep + 1)
        this.$router.push({name: 'MovieSearch', query: {q: this.q} })
        this.$store.dispatch(type.CLEAR_MOVIES_QUERY)
      },
      getQuery(){

        if(!this.$route.query.q){
          return ;
        }
        // if(this.$route.query.q !== this.$store.state.MovieModule.movies.movieQuery.q){
            if(!this.isEnd){
              console.log('------取第:--dispatch ... --' + this.page + '--- 页---')
              // 以载荷形式分发
              this.$store.dispatch(type.FETCH_MOVIES_QUERY, { q: this.$route.query.q, start: (this.page - 1) * this.offset, count: this.offset })
            }else{
              console.log('-----没有多余的数据啦---')
            }
        // }
      }
    }
  }
</script>

<style lang="less" scoped>
#search{
  top: 0;
  width: 100%;
  left: 0;
}
.search-bar{
    background: #fff;
    position: relative;
}
.bar-icon{
    color:#757575;
}
.bar-text{
    font-size: 16px;
    height: 100%;
    position: relative;
    margin-bottom: 0px;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &:focus{
      border: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      outline: none;
    }
}
.bar-test{
    background: #ddd;
}
.result{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 400px;
    .elem{
        position: relative;
        box-sizing: border-box;
        margin: 10px 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 30%;
        overflow: hidden;
        .image{
            top: 0;
            left: 0;
            width: 30%;
            height: 0;
            background: #ccc;
            padding-top: 42%;
            background-size: cover;
            -moz-background-size: cover;
        }
        .text{
            overflow: hidden;
            top: 0;
            position: absolute;
            display: block;
            width: 70%;
            height: 100%;
            margin: 0;
            padding: 10px;
            font-size: 14px;
            right: 0;
            box-sizing: border-box;
            .name{
              height:20px;
              line-height: 20px;
              .title{
                font-size: 16px;
                font-weight: 800;
              }
              .year{
                color: #999;
              }
            }
            .star{
              display:-webkit-box;
              display:-ms-flexbox;
              display:flex;
              padding-top: 2px;
              color: #ff6f00;
              .star-box{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-right: 4px;
                letter-spacing: -3px;
                .star-icon{
                  margin-right: -3px;
                  padding: 2px 0;
                }
              }
              .star-num{
                margin-left: 0px;
              }
            }
            .cast{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
        }
    }
}
</style>
